<template>
  <view class="content">
    <view class="line">
      <view class="titile"> 手机号 </view>
      <input
        type="text"
        placeholder="请输入手机号"
        :value="user.phone"
        disabled
      />
      <view class="red-border" @click="getVeriCode"> 获取验证码 </view>
    </view>

    <view class="line">
      <view class="titile"> 验证码 </view>
      <input type="text" placeholder="请输入验证码" v-model="code" />
      <view class="nothing"> </view>
    </view>

    <view class="line">
      <view class="titile"> 支付密码 </view>
      <input type="text" placeholder="请输入登录密码" v-model="passwd" />
      <view class="nothing"> </view>
    </view>

    <view class="line">
      <view class="titile"> 确认密码 </view>
      <input type="text" placeholder="请再次输入密码" v-model="vipass" />
      <view class="nothing"> </view>
    </view>

    <view class="sure-btn" @click="onSet"> 确认 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: [],
      code: "",
      passwd: "",
      vipass: "",
      //
      getCode: "获取验证码",
      getTimes: 120,
      inter: function () {},
    };
  },
  onShow() {
    var that = this;
    var value = uni.getStorageSync("poxer_ssid");
    /////////////////////////////////////
    var param = { uid: value };
    //////
    that._post("Users/index", param, function (res) {
      if (res.status != "1") {
        return;
      }
      that.user = res.data;
    });
  },
  methods: {
    /**
     * 获取验证码
     */
    getVeriCode() {
      var that = this;
      var param = { phone: that.user.phone };
      //////////
      if (that.getTimes != 120) {
        return;
      }
      that._post("Login/getSmsCode", param, function (res) {
        if (res.status != "1") {
          return;
        }
        that.code = res.data;
        that.inter = setInterval(function () {
          that.getTimes = that.getTimes - 1;
          that.getCode = that.getTimes;
          if (that.getTimes < 1) {
            that.getTimes = 120;
            that.getCode = "获取验证码";
            clearInterval(that.inter);
          }
        }, 1000);
      });
    },
    onSet() {
      var that = this;
      var param = {
        uid: that.user.id,
        code: that.code,
        paycode: that.passwd,
      };
      if (that.code.length < 1) {
        return uni.showModal({
          showCancel: false,
          content: "请输入验证码",
        });
      }
      if (that.passwd.length < 1) {
        return uni.showModal({
          showCancel: false,
          content: "请输入新密码",
        });
      }
      if (that.passwd != that.vipass) {
        return uni.showModal({
          showCancel: false,
          content: "两次密码不一致",
        });
      }
      //////
      that._post("Users/setNewPay", param, function (res) {
        if (res.status != "1") {
          return;
        }
        uni.navigateBack({
          delta: 1,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #000000;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  .line {
    padding-left: 23rpx;
    padding-right: 23rpx;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    border-bottom: 3rpx solid #272727;

    .titile {
      width: 160rpx;
    }

    input {
      width: 230rpx;
    }

    .red-border {
      width: 160rpx;
      height: 56rpx;
      border: 2rpx solid #db1414;
      border-radius: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #db1414;
    }

    // 占位符号
    .nothing {
      width: 160rpx;
    }
  }

  .sure-btn {
    width: 710rpx;
    height: 88rpx;
    background: #db1414;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 125rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>
